<template>
  <div class="p-[12px]">
    <el-pagination
      v-model:current-page="options.pageNum"
      v-model:page-size="options.pageSize"
      :background="true"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, prev, pager, next, sizes, jumper"
      :total="options.total"
      @size-change="handleSizeChange"
      @current-change="change"
    />
  </div>
</template>

<script setup>
const { options, handleSizeChange, change } = defineProps({
  options: {
    type: Object,
    default: () => {},
  },
  change: {
    type: Function,
    default: () => {},
  },
  handleSizeChange: {
    type: Function,
    default: () => {},
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-pagination) {
  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 16px !important;
  }
  .el-pagination__total {
    font-size: 16px;
  }
  .btn-prev,
  .btn-next {
    border: 1px solid rgb(220, 220, 220) !important;
    border-radius: 4px !important;
    // background: rgb(238, 238, 238) !important;
    color: #c6c6c6 !important;
    .el-icon {
      color: #c6c6c6;
    }
  }
  .btn-prev:disabled,
  .btn-next:disabled {
    background: rgb(238, 238, 238) !important;
  }
}

:deep(.el-pager) {
  li {
    border-radius: 4px !important;
    border: 1px solid rgb(220, 220, 220);
    background: rgb(255, 255, 255) !important;
    font-size: 16px !important;
    &:hover {
      background: #fff;
      color: #1c79f4;
      border: 1px solid rgb(28, 121, 244);
    }
    &.is-active {
      border: 1px solid rgb(28, 121, 244);
      color: #1c79f4 !important;
      font-weight: 400;
    }
  }
}
</style>